<script setup>
import { ref, computed, onMounted, defineProps } from "vue";
import { mySettle, settletype } from "@/services/reward";
import { formatPrice } from "@/utils/formatPrice";
import {
  onShow,
  onPullDownRefresh,
  onReachBottom,
  onLoad,
} from "@dcloudio/uni-app";

const changeList = ref([]);
const status = ref("more");
const pages = ref({
  page: 1,
  limit: 20,
});
const isdatelist = ref(true);

const list1 = ref([
  { name: "全部", value: 0 },
  { name: "收入", value: 1 },
  { name: "支出", value: -1 },
]);
const list2 = ref([
  { name: "全部", value: 0 },
  { name: "收入", value: 1 },
  { name: "支出", value: 2 },
]);

//下拉触底
onReachBottom(() => {
  // 触发下拉触底时执行的操作
  getChangeList(date.value);
});

// 减少的金额
const reduce = ref(0);
// 增加的金额
const add = ref(0);

const type = ref(0);
onLoad((e) => {
  settletypefun(selectonetop.value);
});
const selectonetop = ref(0);
const selecttwotop = ref(0);
const selecttwotopname = ref("");
const numobj = ref({});

const clickonefun = (item, index) => {
  pages.value.page = 1;
  isdatelist.value = true;
  selectonetop.value = item.value;
  selecttwotop.value = 0;
  changeList.value = [];
  settletypefun(selectonetop.value, 1);
};
const settletypefun = async (index, type) => {
  let res = await settletype({ type: index });
  list2.value = res.data.type_class;
  selecttwotopname.value = list2.value[selecttwotop.value].value;
  getChangeList(date.value);
};
const clicktwofun = (item, index) => {
  isdatelist.value = true;
  pages.value.page = 1;
  changeList.value = [];
  selecttwotop.value = index;
  selecttwotopname.value = list2.value[selecttwotop.value].value;
  // settletypefun(index,2);
  getChangeList(date.value);
};
// 获取余额变更记录
const getChangeList = async (date = "") => {
  if (!isdatelist.value) return;
  let res = null;
  let dates = {
    date,
    type: selectonetop.value,
    type_class: selecttwotopname.value,
    ...pages.value,
  };
  status.value = "loading";
  res = await mySettle(dates);
  let arr = [];
  arr = res.data.list;

  changeList.value = changeList.value.concat(arr);
  numobj.value = res.data.sum;
  if (res.data.list.length < pages.value.limit) {
    isdatelist.value = false;
    status.value = "no-more";
  } else {
    isdatelist.value = true;
    status.value = "more";
  }
  pages.value.page++;
};

// 方法
function bindDateChange(e) {
  isdatelist.value = true;
  pages.value.page = 1;
  changeList.value = [];
  date.value = e.detail.value;
  getChangeList(date.value);
}

// 跳转余额变动
const gotoBalance = (id) => {
  uni.navigateTo({
    url: `/pages/servicereward/myreward/awaitClose?id=${id}`,
  });
};
const date = ref(null);
// 日期选择器
const currentDate = getDate({
  format: true,
});

date.value = getDate({
  format: true,
});

const startDate = ref(null);
const endDate = ref(null);

startDate.value = getDate("start");
endDate.value = getDate({
  format: true,
});

function getDate(type) {
  const date = new Date();
  let year = date.getFullYear();
  let month = date.getMonth() + 1;
  // let day = date.getDate();

  if (type === "start") {
    year = year - 60;
  } else if (type === "end") {
    year = year;
  }
  month = month > 9 ? month : "0" + month;
  // day = day > 9 ? day : '0' + day;
  return `${year}-${month}`;
}

const DateSwitching = (Data, formString, type) => {
  let newdate = "";
  if (type == 1) {
    newdate = Data.split(formString);

    return newdate[0] + "年";
  }
  if (type == 2) {
    newdate = Data.split(formString);

    return newdate[0] + "年" + newdate[1] + "月";
  }
  if (type == 3) {
    newdate = Data.split(formString);

    return newdate[0] + "年" + newdate[1] + "月" + newdate[2] + "日";
  }
};
const gotjfun = () => {
  uni.navigateTo({
    url: "/pages/servicereward/myreward/count",
  });
};
</script>
<template>
  <view class="changeRecord">
    <view class="changeRecord-top">
      <view class="changeRecord-top-tabs"
        ><up-tabs
          :activeStyle="{
            color: '#01ADA8',
            fontSize: '28rpx',
            fontWeight: 'bold',
          }"
          :inactiveStyle="{
            color: '#000000',
            fontWeight: 'bold',
            fontSize: '28rpx',
          }"
          lineColor="#01ADA8"
          itemStyle="padding-left: 90rpx; padding-right: 90rpx; height: 34px;"
          :list="list1"
          @click="clickonefun"
        ></up-tabs
      ></view>
      <view class="top-item-select-k">
        <view class="top-item-select">
          <up-tabs
            :activeStyle="{
              color: '#01ADA8',
              fontSize: '28rpx',
              backgroundColor: 'rgba(1,173,168,0.1)',
              padding: '10rpx 24rpx',
              borderRadius: '40rpx',
            }"
            :inactiveStyle="{
              color: '#000000',
              fontSize: '28rpx',
              backgroundColor: '#F5F5F5',
              padding: '10rpx 24rpx',
              borderRadius: '40rpx',
            }"
            lineColor="#ffffff"
            itemStyle="padding-left: 20rpx; padding-right: 20rpx; height: 34px;"
            :list="list2"
            @click="clicktwofun"
          ></up-tabs>
        </view>
        <view class="item-tj">
          <view class="item-tj-index" @click="gotjfun">
            <image
              src="@/pages/servicereward/static/reward/icon-tj.png"
              class="tj-img"
            ></image>
            <text>统计</text>
          </view>
        </view>
      </view>
    </view>

    <view class="record-card" v-show="changeList && changeList.length > 0">
      <view class="record-card-top">
        <view class="record-card-top-right">
          <text class="one"
            >增加{{
              formatPrice(numobj && numobj.add_balance ? numobj.add_balance : 0)
            }}</text
          >
          <text class="two"
            >减少{{
              formatPrice(
                numobj && numobj.down_balance ? numobj.down_balance : 0
              )
            }}</text
          >
        </view>
        <view class="record-card-top-left">
          <picker
            mode="date"
            :value="date"
            :start="startDate"
            fields="month"
            :end="endDate"
            @change="bindDateChange"
          >
            <view class="uni-input">
              <text>{{ DateSwitching(date, "-", 2) }}</text>
              <image
                src="@/pages/servicereward/static/reward/icons_ach_more.png"
                mode="scaleToFill"
            /></view>
          </picker>
        </view>
      </view>
      <view class="record-card-bottom">
        <view
          class="record-card-list"
          v-for="(itemone, index) in changeList"
          :key="index"
          @click="gotoBalance(itemone.id)"
        >
          <view class="record-card-list-top">
            <view class="record-card-item-left"
              >{{ itemone.type_text }}-{{ itemone.type_class_text }}</view
            >
            <view
              class="record-card-item-right"
              :class="itemone.type == 1 ? 'yellor-test' : ''"
              >{{ itemone.type == 1 ? "+" : "-" }}
              <text>{{ formatPrice(itemone.money) }}</text></view
            >
          </view>
          <view class="record-card-list-bottom">
            <view class="record-card-time">{{ itemone.create_time }}</view>
            <view class="record-card-balance">{{ itemone.record_status }}</view>
          </view>
        </view>
      </view>
    </view>

    <view class="record-card" v-if="changeList && changeList.length === 0">
      <view class="record-card-top">
        <view class="record-card-top-right">
          <text class="one">增加0</text>
          <text class="two">减少0</text>
        </view>
        <view class="record-card-top-left">
          <picker
            mode="date"
            :value="date"
            :start="startDate"
            fields="month"
            :end="endDate"
            @change="bindDateChange"
          >
            <view class="uni-input"
              ><text>{{ DateSwitching(date, "-", 2) }}</text
              ><image
                src="@/pages/servicereward/static/reward/icons_ach_more.png"
                mode="scaleToFill"
            /></view>
          </picker>
        </view>
      </view>
    </view>
    <view class="nodate-bt" v-if="changeList.length === 0">
      <image src="/static/nodate/datas.png" mode="widthFix"></image>
    </view>
    <uni-load-more color="#c6c5c3" :status="status" />
  </view>
</template>
<style lang="scss" scoped>
@import "rewardlist.scss";
</style>
